<template>
  <el-dialog :visible.sync="isShow" title="批量修改培养计划" :before-close="handleClose" width="54%" :close-on-click-modal="false"
            :close-on-press-escape="false">
    <div>
      <ul class="switch-ul">
        <li
            v-for="item in radios"
            :key="item.label"
            @click="activeTab(item.key)"
            :class="{active: viewTypes == item.key}"
        >{{item.label}}</li>
      </ul>    
      <el-form
        :model="editCourseForm"
        ref="editCourseForm"
        label-width="90px"
        label-position="right"
        style="margin-left:12px;"
        :rules="rules"
      >
        <template v-if="viewTypes == '1'">
          <el-row  gutter="40">
            <el-col span="12">
              <el-form-item label="原课程:" prop="oldCourseCode">
                <el-select
                  v-model="editCourseForm.oldCourseCode"
                  filterable
                  clearable
                  remote
                  placeholder="请输入关键词"
                  :remote-method="queryCourse2"
                  style="width:100%;"
                >
                  <el-option
                    v-for="item in coursesOld"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                  <i class="el-icon-search" slot="prefix"></i>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row gutter="40">
            <el-col span="12">
              <el-form-item label="新课程:" prop="newCourseCode">
                <el-select
                  v-model="editCourseForm.newCourseCode"
                  filterable
                  clearable
                  remote
                  placeholder="请输入关键词"
                  :remote-method="queryCourse1"
                  style="width:100%;"
                >
                  <el-option
                    v-for="item in coursesNew"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                  <i class="el-icon-search" slot="prefix"></i>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
        <template v-if="viewTypes == '2'">
          <el-row gutter="40">
            <el-col span="12">
              <el-form-item label="新增课程:" prop="newCourseCode">
                <el-select
                  v-model="editCourseForm.newCourseCode"
                  filterable
                  remote
                  clearable
                  placeholder="请输入关键词"
                  :remote-method="queryCourse1"
                  style="width:100%;"
                >
                  <el-option
                    v-for="item in coursesNew"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                  <i class="el-icon-search" slot="prefix"></i>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row gutter="40">
            <el-col span="12">
              <el-form-item label="课程类别:" prop="labelId">
                <el-select v-model="editCourseForm.labelId" style="width:100%;">
                  <el-option
                    v-for="item in courseCategories"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
        <template v-if="viewTypes == '3'">
          <el-row gutter="40">
            <el-col span="12">
              <el-form-item label="删除课程:" prop="oldCourseCode">
                <el-select
                  v-model="editCourseForm.oldCourseCode"
                  filterable
                  clearable
                  remote
                  placeholder="请输入关键词"
                  :remote-method="queryCourse2"
                  style="width:100%;"
                >
                  <el-option
                    v-for="item in coursesOld"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                  <i class="el-icon-search" slot="prefix"></i>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">{{$t("common.btn.cancel")}}</el-button>
      <el-button type="primary" @click="batchEdit">{{$t("common.btn.confirm")}}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getCourseList, getCourseCategoryFormById } from 'common/src/api/courseTemplate'
import { batchUpdate, batchPlanAdd, batchPlanDelete } from 'common/src/api/culture/culturePlan'
import Tinymce from 'common/src/components/tinymce'
import * as API from 'common/src/api/culture/cultruescheme'
export default {
  components: {
    Tinymce,
  },
  props: {
    isShow: { type: Boolean, required: true },
    cultureSchemes: { type: Array, required: false },
    currentTemplet: { type: Number, required: true },
    schemedId:{ type: Number, required: true}
  },
  data() {
    return {
      radios: [
        { label: '批量修改', key: '1' },
        { label: '批量增加', key: '2' },
        { label: '批量删除', key: '3' },
      ],
      insertAtWhere: '0',
      chapters: [],
      viewTypes:'1',
      courseCategories: [],
      editCourseForm: {
        newCourseCode: '',
        oldCourseCode: '',
        labelId:'',
      },
      coursesOld: [],
      coursesNew: [],
      rules: {
        oldCourseCode: [
          {
            required: true,
            message: '请选择课程',
          },
        ],
        newCourseCode: [
          {
            required: true,
            message: '请选择课程',
          },
        ],
        labelId: [
          {
            required: true,
            message: '请选择课程类别',
          },
        ],
      },
    }
  },
  methods: {
    queryCourse1(val) {
      let query = { condition: val }
      getCourseList(query).then((response) => {
        if (response.code == 200) {
          this.coursesNew = response.data.list.map((ele) => {
            return { value: ele.code, label: ele.name }
          })
        }
      })
    },
    queryCourse2(val) {
      let query = { schemeId: JSON.stringify(this.schemedId),condition: val }
      getCourseList(query).then((response) => {
        if (response.code == 200) {
          this.coursesOld = response.data.list.map((ele) => {
            return { value: ele.code, label: ele.name }
          })
        }
      })
    },
    init() {
      this.coursesNew =[];
      this.coursesOld =[];
      this.loadCourseCategory()
      if (this.$refs['editCourseForm'])
          this.$refs['editCourseForm'].clearValidate()   
    },
    loadCourseCategory() {
     
      getCourseCategoryFormById(this.schemedId, "2")
        .then(res => {
            if (res.code === 200) {
              let courseCategories =[];
              if(res.data.cultureRuleList && res.data.cultureRuleList.length > 0){
                this.courseCategories = res.data.cultureRuleList.filter(
                 c => c.labelId != 50&&c.labelId != 561&&c.labelId != 1072&&c.labelId!=1583&&c.orderNo!=999).map((ele) => {
                  return { value: ele.labelId, label: ele.label }
                })
               
              }else{   
                this.courseCategories =[]
              }
            }
        })
    },
    activeTab(key){
      this.viewTypes = key;
      this.coursesNew =[];
      this.coursesOld =[];
      this.$refs['editCourseForm'].clearValidate();
      this.$refs['editCourseForm'].resetFields(); 
    },
    batchEdit() {
      if(this.viewTypes == 1){
        this.bitchEdit();
      }else if(this.viewTypes == 2){
        this.bitchAdd();
      }else if(this.viewTypes == 3){
        this.bitchDelete();
      }
    },
    bitchEdit() {
      let id =JSON.stringify(this.schemedId);
      let oldCode = this.editCourseForm.oldCourseCode;
      let newCode = this.editCourseForm.newCourseCode;
      this.$refs['editCourseForm'].validate((valid) => {
        if (valid) {
          batchUpdate(id,oldCode,newCode).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '操作成功!',
              })
              this.handleClose()
            }
          })
        }
      })  
    },
    bitchAdd() {
      let id =JSON.stringify(this.schemedId);
      console.log(this.editCourseForm.labelId)
      let labelId = this.editCourseForm.labelId;
      let newCode = this.editCourseForm.newCourseCode;
      this.$refs['editCourseForm'].validate((valid) => {
        if (valid) {
          batchPlanAdd(id,labelId,newCode).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '操作成功!',
              })
              this.handleClose()
            }
          })
        }
      })  
    },
    bitchDelete() {
      let id =JSON.stringify(this.schemedId);
      let oldCode = this.editCourseForm.oldCourseCode;
      this.$refs['editCourseForm'].validate((valid) => {
        if (valid) {
          batchPlanDelete(id,oldCode).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '操作成功!',
              })
              this.handleClose()
            }
          })
        }
      })  
    },
    handleClose() {
      this.$emit('change-visible')
    },
  },
  watch: {
    isShow: function(_n, _o) {
      this.viewTypes = 1;
      this.editCourseForm.newCourseCode = '';
      this.editCourseForm.oldCourseCode = '';
      if (_n) this.init()
    },
  },
}
</script>
<style lang="scss" scoped>
ul.switch-ul {
      padding: 0;
      margin: 0 0 40px;
  }
  ul.switch-ul li {
      height: 32px;
      line-height: 32px;
      cursor: pointer;
      display: inline-block;
      padding: 0px 20px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-right:0;
      font-size: 14px;
  }
  ul.switch-ul li:last-child {
      border-right: 1px solid #ccc;
  }
  ul.switch-ul li.active {
      color: #fff;
      background:rgba(58, 127, 232, 1);
      border: 1px solid rgba(58, 127, 232, 1);
  }
</style>

